<template>
	<scroll-view scroll-y class="page-scroll">
		<view class="feedback-box">
			<view>
				<image src="/static/images/left.png" class="left-icon" @click="backToLast"></image>
			</view>
			<view class="commentBox">
				<textarea v-model="comment" :maxlength="200" rows="4" cols="50"
					:placeholder="$t('suggestionPlaceholder')" class="textarea-style"></textarea>
				<view id="charCount" class="char-count">{{ comment.length }}/200</view>
				<!-- 选择反馈类型-->
				<view class="radio-content">
					<!-- 第一个单选按钮 -->
					<view class="radio" @click="selectFeedbackType('产品')"
						:class="{ 'radio-default': feedbackType === '产品' }">
						<view :class="{ 'radio-active': feedbackType === '产品' }"></view>
					</view>
					<text @click="selectFeedbackType('产品')"
						style="margin: 0 1rem 0 0.5rem;">{{$t('radioProduct')}}</text>

					<!-- 第二个单选按钮 -->
					<view class="radio" @click="selectFeedbackType('APP')"
						:class="{ 'radio-default': feedbackType === 'APP' }">
						<view :class="{ 'radio-active': feedbackType === 'APP' }"></view>
					</view>
					<text @click="selectFeedbackType('APP')" style="margin: 0 1rem 0 0.5rem;">{{$t('radioApp')}}</text>

					<!-- 第三个单选按钮 -->
					<view class="radio" @click="selectFeedbackType('其他')"
						:class="{ 'radio-default': feedbackType === '其他' }">
						<view :class="{ 'radio-active': feedbackType === '其他' }"></view>
					</view>
					<text @click="selectFeedbackType('其他')" style="margin: 0 1rem 0 0.5rem;">{{$t('radioOther')}}</text>
				</view>
				<button class="submitted" @click="submitFeedback">{{$t('submitSuggestion')}}</button>
			</view>

			<view class="count-box">
				<view class="line-fenge"></view>
				<view class="count-style">{{$t('suggestionAccepted')}} {{total}}</view>
				<view class="line-fenge"></view>
			</view>

			<!-- 反馈列表 -->
			<view style="height: 25rem;">
				<scroll-view scroll-y class="feedbacks-scroll">
					<view class="feedback-card" v-for="(item,index) in formattedFeedbacks" :key="index">
						<view class="card-header">
							<view class="name-style">{{item.user_name}}</view>
							<view class="time-style">{{item.formattedTime}}</view>
						</view>
						<view class="card-content">{{item.content}}</view>
						<view class="card-footer">#{{item.tag}}</view>
					</view>
				</scroll-view>
			</view>

			<!-- 分页 -->
			<view class="pagination">
				<button @click="prevPage" :disabled="currentPage === 1">&lt;</button>
				<button v-for="page in visiblePages" :key="page" @click="goToPage(page)"
					:class="{ active: currentPage === page }">{{ page }}</button>
				<button @click="nextPage" :disabled="currentPage === totalPages">&gt;</button>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="popup-container" v-if="issubmitSuccess">
			<view class="popup-content">
				<view style="text-align: center;">
					<image src="/static/images/logo.png" class="popup-image"></image>
					<view class="tip-style">{{$t('submitSucess')}}</view>
					<button class="popup-button" @click="confirmBtn">{{$t("confirm")}}</button>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { computed, ref, watch } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { formatTimeAgo } from '@/utils/timeUtils.js' // 导入时间工具
	import { getFeedback, addFeedback } from '@/api/feedback/feedback.js'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	const { t } = useI18n()
	onLoad(() => {
		getFeedbackList()
	})

	// 定义评论内容和反馈类型的响应式变量
	const comment = ref<String>('');
	const feedbackType = ref<String>('');
	const total = ref<Number>(0)
	// 当前页码
	const currentPage = ref(1);
	// 每页显示的数据条数
	const itemsPerPage = ref(3);
	const issubmitSuccess = ref(false)
	interface Feedback {
		content : string;
		tag : string;
		feedback_id ?: string;
		create_at : string;
		user_name : string;
		thumbs ?: string;
	}
	let feedbacks = ref<Feedback[]>([])

	// 获取反馈列表
	function getFeedbackList() {
		feedbacks.value = []
		getFeedback({ page: currentPage.value, pageSize: 3 }).then((res) => {
			if (res && res.code == 200) {
				if(res.data.feedbacks == null || res.data.feedbacks==""){
					return 
				}else{
					feedbacks.value = res.data.feedbacks
					total.value = res.data.total
				}
			}
		})
		
	}
	// 监听currentPage变化，自动获取数据
	watch(currentPage, () => {
		getFeedbackList();
	})


	const backToLast = () => {
		uni.navigateBack()
	}
	function selectFeedbackType(type : string) {
		feedbackType.value = type;
	}
	// 提交反馈的函数
	const submitFeedback = () => {
		if (feedbackType.value == "") {
			// 反馈类型没选择 不能提交
			uni.showToast({
				title: t('selectFeedbackType'),
				icon: 'none',
				duration: 2000
			})
		}
		else if (comment.value.length < 5) {
			// 反馈内容少于5个字 不能提交 
			uni.showToast({
				title: t('feedbackNotEnough'),
				icon: 'none',
				duration: 2000
			})
		}
		else {
			addFeedback({ content: comment.value, tag: feedbackType.value }).then((res) => {
				if (res && res.code == 200) {
					// 可以在这里重置评论内容
					comment.value = '';
					feedbackType.value = ""
					// 成功后
					issubmitSuccess.value = true
					// 提交成功后刷新第一页数据
					currentPage.value = 1;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
				}
			})
			// console.log('提交的评论:', comment.value);
			// console.log('反馈类型:', feedbackType.value);
		}
	};
	function confirmBtn() {
		issubmitSuccess.value = false
	}

	// 计算总页数
	// const totalPages = computed(() => Math.ceil(feedbacks.value.length / itemsPerPage.value));
	// const totalPages = total
	const totalPages = computed(() => {
		if (total.value === 0) return 0;
		return Math.ceil(Number(total.value) / itemsPerPage.value);
	})
	// 使用computed定义计算属性 时间格式化
	const formattedFeedbacks = computed(() =>
		feedbacks.value.map(feedback => ({
			...feedback,
			formattedTime: formatTimeAgo(feedback.create_at)
		}))
	)
	// 计算当前页的数据
	// const currentData = computed(() => {
	// 	const start = (currentPage.value - 1) * itemsPerPage.value;
	// 	const end = start + itemsPerPage.value;
	// 	return formattedFeedbacks.value.slice(start, end);
	// });
	// 计算需要显示的页码按钮
	const visiblePages = computed(() => {
		let pages = [];
		const maxVisibleButtons = 5; // 最多显示的页码按钮数量
		let startPage = Math.max(currentPage.value - Math.floor(maxVisibleButtons / 2), 1);
		let endPage = startPage + maxVisibleButtons - 1;

		if (endPage > totalPages.value) {
			endPage = totalPages.value;
			startPage = Math.max(endPage - maxVisibleButtons + 1, 1);
		}
		for (let i = startPage; i <= endPage; i++) {
			pages.push(i);
		}
		return pages;
	});
	// 跳转到指定页码
	const goToPage = (page : number) => {
		if (page >= 1 && page <= totalPages.value) {
			currentPage.value = page;
			// getFeedbackList()
		}
	};
	// 上一页
	const prevPage = () => {
		if (currentPage.value > 1) {
			goToPage(currentPage.value - 1);
			// getFeedbackList()
		}
	};
	// 下一页
	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			goToPage(currentPage.value + 1);
			// getFeedbackList()
		}
	};
</script>

<style lang="scss" scoped>
	.page-scroll {
		height: 100%;
	}

	.feedback-box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 2rem 0;
		/* #ifdef  MP-WEIXIN*/
		padding-top: 3.5rem;
		/* #endif*/
	}

	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
		margin-left: 0.5rem;
		// margin: 0.5rem 0 0 0rem;
		/* #ifdef  MP-WEIXIN*/
		margin: 0rem 0 0 0.5rem;
		/* #endif*/
	}

	.commentBox {
		margin: 0 auto;
		width: 96%;
		height: 15.6rem;
		line-height: 1.25rem;
		border-radius: 0.63rem;
		background-color: rgba(255, 255, 255, 0.9);
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);
		padding: 0.8rem;
		box-sizing: border-box;
		position: relative;
	}

	.textarea-style {
		margin: 0 auto;
		width: 100%;
		height: 8.5rem;
		line-height: 1.25rem;
		border-radius: 0.44rem;
		color: rgba(136, 136, 136, 1);
		border: 2px solid #e1e1e1;
		font-size: 0.88rem;
		text-align: left;
		padding: 0.5rem 0.5rem 1.5rem;
		box-sizing: border-box;
	}

	.char-count {
		position: absolute;
		top: 7.8rem;
		right: 8%;
		font-size: 12px;
	}

	.radio-content {
		margin-top: 1rem;
		height: 40rpx;
		display: flex;
		align-items: center;
	}

	.radio {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 2rpx solid #cccccc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.radio-active {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #DE868F;
	}

	.radio-default {
		border: 2rpx solid #DE868F;
	}

	.submitted {
		width: 96%;
		height: 3rem;
		line-height: 3rem;
		margin-top: 0.6rem;
		color: #fff;
		font-size: 0.88rem;
		font-weight: 600;
		border-radius: 10px;
		border: none;
		background-color: #DE868F;
	}

	.count-box {
		width: 96%;
		margin: 1rem auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.line-fenge {
		width: 5rem;
		height: 0.7rem;
		border-bottom: 0.13rem solid #a6a6a6;
	}

	.count-style {
		flex: 1;
		white-space: nowrap;
		height: 1.63rem;
		line-height: 1.63rem;
		color: rgba(16, 16, 16, 1);
		font-size: 1rem;
		text-align: center;
	}

	.feedbacks-scroll {
		height: 100%;
		/*确保菜单容器填满scroll-view
		:deep(.menu-container) { 
			height: 100%;
		}*/
	}

	.feedback-card {
		margin: 0.5rem auto;
		width: 96%;
		min-height: 6.25rem;
		height: auto;
		line-height: 1.25rem;
		border-radius: 0.5rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: center;
		border: 0.13rem solid rgba(187, 187, 187, 0.3);
		padding: 0.5rem;
		box-sizing: border-box;
	}

	.card-header {
		display: flex;
		height: 1.25rem;
		color: rgba(16, 16, 16, 0.8);
		margin: 0.3rem 0;
	}

	.name-style {
		height: 1.25rem;
		line-height: 1.25rem;
		text-align: left;
		margin-left: 0.5rem;
	}

	.time-style {
		height: 1.25rem;
		line-height: 1.25rem;
		text-align: left;
		margin-left: 1.7rem;
	}

	.card-content {
		width: 85%;
		height: auto;
		line-height: 1.25rem;
		text-align: left;
		margin-left: 1.5rem;
		overflow-wrap: break-word; /* 换行*/
	}

	.card-footer {
		margin: 0.5rem 0 0 0.5rem;
		height: 1.25rem;
		line-height: 1.25rem;
		color: rgba(16, 16, 16, 0.8);
		text-align: left;
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4px;
		width: 80%;
		margin: 0.3rem auto 0;
	}

	.pagination button {
		height: 2rem;
		font-size: 0.8rem;
		border: 1px solid #ddd;
		background-color: white;
		display: flex;
		justify-content: center;
	}

	.pagination button.active {
		border: 1px solid #DE868F;
		color: #DE868F;
	}

	.pagination button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.popup-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		// width: 70%;
		width: 520rpx;
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		box-sizing: border-box;
	}

	.popup-image {
		width: 7.5rem;
		height: 7.5rem;
		border-radius: 50%;
	}

	.tip-style {
		// height: 1.25rem;
		word-break: break-all;
		line-height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: center;
	}

	.popup-button {
		width: 6.13rem;
		height: 2rem;
		line-height: 2rem;
		border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
		background-color: rgba(222, 134, 143, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 0.88rem;
		text-align: center;
		margin-top: 1rem;
		border: none;
	}
</style>